<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { ref } from 'vue'
// 要删除的内容
import { Icon } from '@iconify/vue'
import { useI18n } from "vue-i18n";

const count = ref(0)
const { locale } = useI18n();
 
// 切换语言
const changeLocale = () => {
  locale.value = locale.value == 'zh' ? 'en' : 'zh';
  localStorage.setItem('language', locale.value)
};
</script>

<template>
  <main class="font-sans">
    <div class="space-y-5 m-10 shadow p-10 border border-solid border-gray-50 rounded-3">
      <Button type="button" @click="count++">
        count is {{ count }}
      </Button>

      <Icon icon="mdi-light:home" class="size-10" @click="changeLocale()"/>

      <span>{{ $t('hello') }} - {{ locale }}</span>
    </div>
  </main>
</template>
